<template>
    <div class="header-container">
        <div class="router-view">
            <el-breadcrumb separator-class="el-icon-arrow-right" separator=">">
                <el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index" class="bread-tab">
                    <span :class="{menuNow: index === $route.meta.length-1}" @click="changeRouter(item.url,index)">
                        {{ item.name }}
                    </span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        
        <div class="admin-right">
            <img class="admin-head" width="32px" src="../assets/images/dog.jpg">
            <el-dropdown @command="signOut" trigger="click">
                <span class="el-dropdown-link">
                    {{ name }}
                    <i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <img src="../assets/images/logout.png" class="dk-icon-back">
                        退出
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
    import Utils from '../jslibs/utils';
	import {
		logout
	} from '@/api/common.js';
    export default {
        data() {
            return {
                name: '',
            };
        },

        created() {
            this.name = Utils.getSession('username') || "Admin"
        },
        
        methods: {
            changeRouter(url, index) {
                if (url) {
                    const meta = this.$route.meta;
                    this.$router.go(index + 1 - meta.length)
                }
            },
            
            //退出登录
             async signOut() {
				const {
					data,
					status
				} = await logout({});
				if (status !== 200) return;
				if(data.code == 200){
					this.$message.success('退出成功');
				}
				Utils.setCookie('token', "", -1);
				Utils.removeSession('role');
				Utils.removeSession('username')
				this.$router.push('./login');
            },
        },
    };
</script>

<style lang="less">
    .header-container {
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        margin: 0;
        // width: calc(100vw - 300px);
        // width: -webkit-calc(100vw - 300px);
        // width: -moz-calc(100vw - 300px);
		width: 100%;
        // position: fixed;
        border-bottom: 1px solid #e5e5e5;
		box-sizing: border-box;
        z-index: 9;

        .search-row {
            width: 100%;
        }
        
        .bread-tab{
            cursor: pointer;
        }
        .bread-tab .menuNow{
            cursor: pointer;
        }

        .router-view {
            /deep/.el-breadcrumb {
                line-height: 20px;
            }

            .menuNow {
                font-family: PingFangSC-Medium;
                font-weight: 500;
                color: rgba(76, 76, 76, 1);
            }
        }

        .filter-view {
            display: flex;
            padding-right: 25px;
            align-items: center;

            .type {
                margin: 0 10px;
                color: #223040;
                background: rgba(0, 0, 0, 0);
                margin: 0 15px;
            }
        }

        .admin-right {
            height: 100%;
            display: flex;
            align-items: center;
			cursor: pointer;
            .admin-head {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                margin-right: 12px;
            }
        }
    }

    .dk-icon-back {
        display: inline-block;
        width: 14px;
        height: 14px;
        margin: 12px 12px 0 0;
    }

    .top-search-input {
        width: 220px;
        margin: 0 10px;

        .search-icon {
            width: 36px !important;
            height: 36px !important;
            padding: 10px 11px !important;
        }

        .search-row {
            margin-bottom: 30px;
        }
    }
</style>
